{% extends "base-user.html" %}

{% block css%}    
{% endblock %}
{% block js%} 
<script>
$(function() {
    $('.close').click(function(){
        $.getJSON("{% url 'PiApp.api.delete_notification_api' %}",  {id : $(this).attr('noti_id')}, 
            function(data){
                if(data['msg'] != 'ok') {
                    alert('failed');
                }              
        });
    });
})  
</script>
{% endblock %}


{% block on_ready%}    
{% endblock %}

{% block content %} 
<div class="row">
    {% if unread.count != 0 %}
    <div class="col-md-12">
        <div class="box box-danger">
            <div class="box-header">
                <i class="fa fa-bullhorn"></i>
                <h3 class="box-title">Unread</h3>
            </div>
            <div class="box-body">
                {% for item in  unread %}
                    {% if item.type == 'd' %}
                        <div class="callout callout-danger">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                    {% if item.type == 'i' %}
                        <div class="callout callout-info">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                    {% if item.type == 'w' %}
                        <div class="callout callout-warning">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% else %}
    <div class="col-md-12">
        <div class="box box-info">
            <div class="box-header">
                <i class="fa fa-bullhorn"></i>
                <h3 class="box-title">Notification</h3>
            </div>
            <div class="box-body">
                {% for item in  others %}
                    {% if item.type == 'd' %}
                        <div class="callout callout-danger">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                    {% if item.type == 'i' %}
                        <div class="callout callout-info">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                    {% if item.type == 'w' %}
                        <div class="callout callout-warning">
                            <button type="button" class="close" data-dismiss="alert" aria-hidden="true" noti_id="{{item.id}}" >×</button>
                            <h4>{{item.title}}</h4>
                            <p>{{item.content}}</p>
                        </div>
                    {% endif %}
                {% endfor %}
            </div>
        </div>
    </div>
    {% endif %}
</div>
{% endblock %}